.keep-note {
  position relative
  box-sizing border-box
  width 100%
  margin-bottom 2rem
  padding 0.8rem 1rem
  font-size 0.9rem
  border-style solid
  border-width 0.1rem
  border-radius 0.4rem

  &.info {
    color var(--keep-info-color)
    background-color var(--keep-info-background-color)
    border-color var(--keep-info-border-color)
  }


  &.primary {
    color var(--keep-primary-color)
    background-color var(--keep-primary-background-color)
    border-color var(--keep-primary-border-color)
  }


  &.success {
    color var(--keep-success-color)
    background-color var(--keep-success-background-color)
    border-color var(--keep-success-border-color)
  }


  &.warning {
    color var(--keep-warning-color)
    background-color var(--keep-warning-background-color)
    border-color var(--keep-warning-border-color)
  }


  &.danger {
    color var(--keep-danger-color)
    background-color var(--keep-danger-background-color)
    border-color var(--keep-danger-border-color)
  }


  .keep-note-title {
    box-sizing border-box
    padding 0.6rem 0 0 0
    color inherit
    font-weight 600
    font-size 1rem
  }


  p {
    color inherit
  }
}
